<template>
    <div>
        <h3>房型的添加</h3>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>房型名称</td>
                    <input type="text" v-model="queryinfo.roomName">
                </tr>
                <tr>
                    <td>房型大小</td>
                    <input type="text" v-model="queryinfo.mianJi">
                </tr>
                <tr>
                    <td>房型图片</td>
                    <input type="file" @change="img">
                    <img :src="queryinfo.img" alt="" width="100" height="100" v-if="queryinfo.img!=''">
                </tr>
                <tr>
                    <td>房号</td>
                    <input type="text" v-model="queryinfo.nid">
                </tr>
                <tr>
                    <td>状态</td>
                    <input type="radio" :value="1" v-model="queryinfo.state" >投放
                    <input type="radio" :value="0"  v-model="queryinfo.state">未投放
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <input type="button" value="添加" @click="ok">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import {ref,reactive,onMounted} from 'vue'
import axios from 'axios';

const img=(e:any)=>{
    let obj=e.target.files[0];
    let f=new FormData();
    f.append('file',obj);

    axios({
        method:'post',
        url:'/api/Img/UpFile',
        data:f
    })
    .then(res=>{
        console.log(res);
        queryinfo.img=res.data
    })
    .catch(err=>{
        console.log(err);
    })
}
const queryinfo=reactive({
  "roomName": "",
  "mianJi": '',
  "img": "",
  "nid": '',
  "state": '',
})
const ok=()=>{
    axios({
        method:'post',
        url:'/api/Room/RoomAdd',
        data:queryinfo,
    })
    .then(res=>{
        console.log(res);
        if(res.data>0){
            alert("添加成功")
        }
        else{
            alert("添加失败");
            return;
        }
    })
    .catch(err=>{
        console.log(err);
    })
}
</script>

<style scoped>

</style>